<template>
  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" title="多语言设置" append-to-body width="600px">
    <el-row>
      <el-col :span="24">
        <DataGridTable
          v-loading="loading"
          :sup_this="sup_this"
          :data="menu_lan_list"
          :multi-select="false"
          :show-page="false"
          style="width: 100%"
          @row-click="handleCurrentChange">
          <el-table-column label="语言" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.lanCode" placeholder="请选语言">
                <el-option
                  v-for="(item) in dicts.lan_code"
                  :key="item.id"
                  :label="item.dictName"
                  :value="item.dictCode"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" size="small" placeholder="请输入名称" @change="handleEdit(scope.$index, scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </DataGridTable>
      </el-col>
      <el-col :span="24">
        <div class="el-table-add-row" style="width: 99.2%;" @click="addLan"><span>+ 添加</span></div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    menu_lan_list: {
      type: Array,
      required: true
    },
    name: {
      type: String,
      required: false,
      default: ''
    },
    sup_this: {
      type: Object,
      required: true
    }
  },
  dictTypes: ['lan_code'],
  data() {
    return {
      loading: false,
      dialog: false
    }
  },
  methods: {
    addLan() {
      const addRow = { lanCode: 'zh_CN', name: this.name }
      this.menu_lan_list.push(addRow)
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      this.menu_lan_list.splice(index, 1)
    },
    cancel() {
      this.dialog = false
    },
    doSubmit() {
      const tmpLan = []
      let isValid = true
      this.menu_lan_list.forEach(function(data, index) {
        if (tmpLan[data.lanCode]) {
          isValid = false
          return
        }
        tmpLan[data.lanCode] = data.lanCode
      })
      if (!isValid) {
        this.$message({
          message: '语言不能重复',
          type: 'warning'
        })
        return false
      }
      this.cancel()
    }
  }
}
</script>
